<template>
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" @keyup.enter="submitHandle()">
			<el-form-item prop="ip" label="IP地址">
				<el-input v-model="dataForm.ip" placeholder="服务器IP地址"></el-input>
			</el-form-item>

			<el-form-item prop="workSpace" label="工作目录">
				<el-input v-model="dataForm.workSpace" placeholder="工作目录"></el-input>
			</el-form-item>

      <el-form-item prop="userName" label="账户">
				<el-input v-model="dataForm.userName" placeholder="服务器登录账户"></el-input>
			</el-form-item>

      <el-form-item prop="password" label="密码">
				<el-input v-model="dataForm.password" placeholder="服务器登录密码"></el-input>
			</el-form-item>

      <el-form-item prop="port" label="端口">
				<el-input v-model="dataForm.port" placeholder="服务器ssh端口"></el-input>
			</el-form-item>


			<el-form-item prop="serverGroupId" label="服务器分组">
				<el-select v-model="dataForm.serverGroupId"
         clearable 
         allow-create
         filterable
         placeholder="请创建服务器分组">
          <el-option
            v-for="item in clusterGroupList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
			</el-form-item>

      
			<el-form-item prop="dataScope" label="服务器所属机构">
        <el-tree-select
          v-model="dataForm.belongOrg"
          :data="userSocpeList"
          :render-after-expand="false"
          :props="{ label: 'name', children: 'children' }" node-key="id"
          show-checkbox
        />
			</el-form-item>

		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import uri from '@/api/uri'
import { postReq,getRequest } from '@/utils/request'
import store from '@/store'
const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const clusterGroupList:any = ref([])
const dataFormRef = ref()
const userSocpeList = ref([])


const dataForm = reactive({
	id: '',
  ip:'',
  workSpace: '/opt/PublishService/',
  userName:'',
  password:'',
  port:'',
  enable: true,
  serverGroupId: '',
  belongOrg: store.userStore.user.orgId
})


const init = (id?: number) => {
	visible.value = true
  dataForm.id = ''

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	// id 存在则为修改
	if (id) {
		getClusterInfo(id)
	}
  initServerGroup()
  getUserScope()
}

const initServerGroup = ()=>{
    getRequest(uri.getServerGroup).then(res =>{
      clusterGroupList.value = res.data
    })
}


 // 获取信息
const getClusterInfo = (id: number) => {
  getRequest(uri.getServerById,{"id":id}).then((res: any) => {
		Object.assign(dataForm, res.data)
	})
} 

const getUserScope =() => {
  getRequest(uri.getUserScope).then((res: any) => {
    userSocpeList.value = res.data
	})
}


const submitHandle = () => {

dataFormRef.value.validate((valid: boolean) => {
  if (!valid) {
    return false
  }
  let url = uri.addServerInfo
  if(dataForm.id){
    url =  uri.updateServerInfo
  }

  postReq(url,dataForm).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        visible.value = false
        emit('refreshDataList')
      }
    })	
  })
})
}




const dataRules = ref({
	ip: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	workSpace: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	serverGroupId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  userName:[{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  password:[{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  port:[{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})


defineExpose({
	init
})
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>